import React, {useEffect, useState} from 'react';
import {ScrollView, View, Text, Button, Image, StyleSheet} from 'react-native';
import normalBehavior from "@/app/pet/behavior/NormalBehavior";
import Play from "./behavior/Play";
import {ThemedView} from "@/components/ThemedView";
import {ThemedText} from "@/components/ThemedText";
import {HelloWave} from "@/components/HelloWave";
import ParallaxScrollView from "@/components/ParallaxScrollView";


export default function Pet() {
    const [hungerValue, setHungerValue] = useState(1000);
    const [waterValue, setWaterValue] = useState(1000);
    const [healthValue, setHealthValue] = useState(1000);
    const [moodValue, setMoodValue] = useState(1000);

    useEffect(() => {
        const timer = setInterval(() => {
            normalBehavior(setHungerValue,setWaterValue,setHealthValue,setMoodValue);
        }, 1 * 1000);
        return () => clearInterval(timer); // 清除定时器
    }, []);


    return (
        /*<ScrollView>
            <View >
                <Text>Hunger:{hungerValue}</Text>
                <Text>Water:{waterValue}</Text>
                <Text>health:{healthValue}</Text>
                <Text>mood:{moodValue}</Text>
                <Play setHungerValue={setHungerValue} setWaterValue={setWaterValue}
                      setHealthValue={setHealthValue} setMoodValue={setMoodValue}/>

            </View>
        </ScrollView>
*/
    <ParallaxScrollView
        headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
        headerImage={
            <Image
                source={require('@/assets/images/partial-react-logo.png')}
            />
        }>
        <ThemedView >
            <Text>Hunger:{hungerValue}</Text>
            <Text>Water:{waterValue}</Text>
            <Text>health:{healthValue}</Text>
            <Text>mood:{moodValue}</Text>
            <Play setHungerValue={setHungerValue} setWaterValue={setWaterValue}
                  setHealthValue={setHealthValue} setMoodValue={setMoodValue}/>
        </ThemedView>
    </ParallaxScrollView>
    );
}

const styles = StyleSheet.create({
    titleContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        gap: 8,
    },
    stepContainer: {
        gap: 8,
        marginBottom: 8,
    },
    reactLogo: {
        height: 178,
        width: 290,
        bottom: 0,
        left: 0,
        position: 'absolute',
    },
});